<template>
	<div class="col-lg-3">
		<div class="ibox">
			<div class="ibox-title ibox-content">
				<h5 class="float-left">{{ title }}</h5>
				<span :class="clas">{{ type }}</span>
			</div>
			<div class="ibox-content">
				<h1 :class="classes" class="no-margins" v-if="!num1">{{ num === 'undefined' ? 0 : num }}{{ s }}</h1>
				<h1 :class="classes" class="no-margins" v-if="num1">{{ num + '/' + num1 }}{{ s }}</h1>		
				<div :class="classes" class="stat-percent font-bold">{{subs}}</div>				
				<small data-i18n="body.total_times" :class="classes">{{to_sub}}</small>	
				<!-- <small v-show="nessary" :class="condition">{{ explanation + conditionData + Math.abs(succC) }}</small>			 -->
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'info_label',
	props: {
		nessary: {
			type: Boolean,
			default: false
		},
		conditionData: [Number, String],
		params: Object,
		hyper: String,
		search: null,
		search_key: String,
		type: String,
		title: String,
		num: [String, Number],
		num1: String,
		status: String,
		sub: String,
		to_sub: String,
		cls: String,
		link: String,
		id: String,
		s: String
	},
	data() {
		return {
			clas: 'label label-' + this.cls + ' float-right',
			classes: 'text-' + this.cls,
			condition: 'condition text-' + this.cls,
			numC: 0
		};
	},
	computed: {
		subs() {
			if(this.sub) {
				return '(' + this.sub + ')'
			}
		}
	},
	mounted() {},
	methods: {
		search_data: function() {
			if (this.search == 'true') {
				this.$emit('search_data', this.search_key);
			}
		}
	}
};
</script>

<style scoped lang="scss">
	@import '../../assets/common/common.scss';

    .text-success {
        color: #409eff;
    }
    .text-danger{
        color: #ed5565;
    }
		h1{
			margin: 0;
		}
		.text-wraning {
			color: #f8ac59;
		}
		.col-lg-3 .ibox .label-wraning{
			background: #f8ac59;
			color: #fff;
		}
    .font-bold {
        font-weight: 600;
    }
    .stat-percent {
        float: right;
    }
		.condition{							
        font-size: 70%;
        font-weight: 400;       
    }
</style>
